<ng-template #labelTemplate>
  <label class="cnsl-label-wrapper" [attr.for]="_control.id" [attr.aria-owns]="_control.id">
    <ng-content select="cnsl-label"></ng-content>
    <span *ngIf="_control.required && !hideRequiredMarker" aria-hidden="true" class="cnsl-form-field-required-marker"
      >*</span
    >
  </label>
</ng-template>

<div class="cnsl-form-field-wrapper" (click)="_control.onContainerClick($event)">
  <ng-template [ngTemplateOutlet]="labelTemplate"></ng-template>
  <div class="cnsl-rel" #inputContainer>
    <ng-content></ng-content>
    <ng-content select="cnslSuffix"></ng-content>
  </div>
  <ng-container *ngIf="help$ && help$ | async as help">
    <div [ngSwitch]="help.type" class="cnsl-form-field-subscript-wrapper">
      <div *ngSwitchCase="'hints'" class="cnsl-form-field-hint-wrapper" [@transitionMessages]="_subscriptAnimationState">
        <ng-content select="cnsl-hint"></ng-content>
      </div>
      <div *ngSwitchCase="'errors'" class="cnsl-form-field-error-wrapper" [@transitionMessages]="_subscriptAnimationState">
        <span cnslError *ngFor="let err of help.validationErrors">
          {{ err.i18nKey | translate: err.params }}
        </span>
        <ng-content select="cnsl-error"></ng-content>
      </div>
    </div>
  </ng-container>
</div>
